<template>
  <div class="user">
    <div class="card">
      <div class="card-tu">
        <img :src="user.avatar">
      </div>
      <h2>{{user.nickname}}</h2>
      <!-- <p>
        微信号：
        <span>123456789</span>
      </p>-->
    </div>
    <div class="nav">
      <div @click="toNextpage()">
        <dl>
          <dd>
            <img src="../assets/icon/个人信息.png">
          </dd>
          <dt>个人信息</dt>
        </dl>
      </div>
      <div @click="toNextpage1()">
        <dl>
          <dd>
            <div v-if="count" class="count" :class="{more: count>99}">{{count > 99 ? '99+' : count}}</div>
            <img src="../assets/icon/我的消息.png">
          </dd>
          <dt>我的消息</dt>
        </dl>
      </div>
      <div @click="toNextpage2()">
        <dl>
          <dd>
            <img src="../assets/icon/帮助.png">
          </dd>
          <dt style="margin-left:-5px">帮助与反馈</dt>
        </dl>
      </div>
      <!-- <div @click="toNextpage3()">
        <dl>
          <dd>
            <img src="../assets/icon/优惠券.png" />
          </dd>
          <dt>优惠券</dt>
        </dl>
      </div>-->
    </div>
    <div class="ss"></div>
    <div class="kecheng">
      <p class="shi-pin" :class="{active: which_to_show == 'Shipin'}" @click="showShip()">
        <a href="#">视频课程</a>
      </p>
      <p class="yin-pin" :class="{active: which_to_show == 'Yinpin'}" @click="showYinp()">
        <a href="#">音频课程</a>
      </p>
    </div>
    <component :is="which_to_show" :list="detail"></component>
  </div>
</template>
<script>
import Shipin from "@/views/shi-pin.vue";
import Yinpin from "@/views/yin-pin.vue";
import { wxShare } from "@/mixin/share";
export default {
  name: "User",
  components: {
    Shipin,
    Yinpin
  },
  mixins: [wxShare],
  data() {
    return {
      which_to_show: "Shipin",
      activeName: "a",
      user: {},
      list: [],
      list2: [],
      detail: [],
      count: 0
    };
  },

  async mounted() {
    let user = this.$store.state.user;
    if (!user.nickname) {
      let res = await this.$http(`api/my/index`);
      console.log(res);
      this.user = res.data;
      this.$store.commit("user", res.data);
    } else {
      this.user = user;
    }
    let res4 = await this.$http(`api/index/get_message_num`);
    this.count = res4.data;
    let res2 = await this.$http(`api/my/get_my_video_list`);
    this.list = res2.data;
    this.detail = res2.data;
    let res3 = await this.$http(`api/my/get_my_voice_list`);
    this.list2 = res3.data;
  },
  methods: {
    showShip() {
      if (this.which_to_show == "Shipin") {
        return;
      }
      this.which_to_show = "Shipin";
      this.detail = this.list;
    },
    showYinp() {
      if (this.which_to_show == "Yinpin") {
        return;
      }
      this.which_to_show = "Yinpin";
      this.detail = this.list2;
    },
    toNextpage() {
      this.$router.push({ name: "userCenter" });
    },
    toNextpage1() {
      this.$router.push({ name: "userMessage" });
    },
    toNextpage2() {
      this.$router.push({
        name: "userbang",
        meta: {
          footShow: true // true显示，false隐藏
        }
      });
    },
    toNextpage3() {
      this.$router.push({ name: "useryou" });
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.van-nav-bar {
  text-align: left;
  background: rgba(242, 242, 242, 1);
}
.van-nav-bar__left .van-nav-bar__text {
  color: black;
  font-size: 3rem;
}
.van-nav-bar__title {
  max-width: 70%;
  margin-left: 44px;
}
.van-icon,
.van-icon::before {
  font-size: 20px;
  color: black;
}
.van-icon-arrow:before {
  font-size: 1.5rem;
  color: rgba(210, 210, 210, 1);
}
.van-cell {
  padding: 20px 16px;
}
.van-cell__left-icon {
  font-size: 0.5rem;
}
.van-cell__title {
  font-family: PingFang SC;
  font-size: 1rem;
}
.card {
  width: 100%;
  height: 193px;
}
.card-tu {
  height: 193px;
  background: url(../assets/img/个人中心背景图.png) no-repeat;
  background-size: cover;
  margin: 10px 15px 0 15px;
}
.count {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
  top: -2px;
  right: -2px;
  text-align: center;
  line-height: 20px;
  color: #fff;
  font-size: 12px;
}
.count.more {
  font-size: 10px;
}
.card-tu img {
  width: 60px;
  height: 60px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  position: relative;
  top: 60px;
  left: 50%;
  transform: translate(-50%);
}
.card h2 {
  width: 100%;
  height: 17px;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  position: absolute;
  top: 140px;
}
.card p {
  height: 11.5px;
  color: #c8d0ff;
  font-size: 12px;
  position: absolute;
  top: 195px;
  left: 150px;
}
.nav {
  padding: 0 15px;
  font-size: 14px;
}
.nav > div {
  width: 25%;
  text-align: center;
  display: inline-block;
}
.nav a {
  color: #292f36;
}
.nav dl {
  display: flex;
  flex-direction: column;
}
.nav dd {
  width: 50px;
  height: 50px;
  background: #f3f4f9;
  border-radius: 50%;
  margin: 18px auto 0;
  position: relative;
}
.nav img {
  width: 17px;
  height: 18px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.nav dt {
  margin-top: 10px;
}
.ss {
  width: 100%;
  height: 10.5px;
  background: #f5f7fc;
  margin-top: 19.5px;
}
.kecheng {
  overflow: hidden;
}
.kecheng p {
  width: 80px;
  height: 35px;
  background: #f3f4f9;
  border-radius: 10px;
  float: left;
  text-align: center;
  line-height: 35px;
  font-size: 14px;
  margin: 19.5px 14.5px 0 15px;
}
.kecheng .active {
  background: #334fff;
  color: #ffffff;
}
.kecheng a {
  color: #282c33;
}
.active a {
  color: #ffffff;
}
</style>